<!DOCTYPE html>
<html lang="zh-CN">
<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>裂变宝</title>
  <link rel="stylesheet" href="/fission/css/iconfont.css">
  <link rel="stylesheet" href="/fission/css/layui.css">
  <link rel="stylesheet" href="/fission/css/common.css">
  <link rel="stylesheet" href="/fission/css/mission.css">
  <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
  <?php $leftss=$poster_fontstyle->left;
  $topss=$poster_fontstyle->top;
  $leftsss=$avtar_style->left;
  $topsss=$avtar_style->top;

  ?>
  <style type="text/css"> 
    #draggable{
      position: absolute;
      top: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_top']}{else}338{/if}px;
      left: {if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_left']}{else}162{/if}px;
      cursor: pointer;
    }
    
    #draggable .draggables img{
      -webkit-user-drag: none; 
      -moz-user-drag: none;
      -ms-user-drag: none; 
      -o-user-drag: none;
    }
    .poster-userinfo{
      width: 110px;
      cursor: pointer;
      position: absolute;
      top: {if $topss}{$topss}{else}0{/if}px;    
      left: {if $leftss}{$leftss}{else}0{/if}px;
    }
    .draggables{
      position: absolute;
      top: {if $topss}{$topss}{else}4{/if}px;
      left: {if $leftss}{$leftss}{else}30{/if}px;
      cursor: pointer;
    }
    #headImg{
      width: 25px;
      height: 25px;
      position: absolute;
      top: {if $topsss}{$topsss}{else}0{/if}px;
      left: {if $leftsss}{$leftsss}{else}0{/if}px;
      cursor: pointer;
    }
    #headImg img{
      width: 25px;
      height: 25px;
      display: block;
      border-right: 50%;
    }
    /* newLei */
    .boxList {
      position: relative;
      left: 710px;
      top: 0px;
    }

    .el-tabs {
      margin-top: -60px;
    }
    /* tab 长度 */
    .el-tabs--card>.el-tabs__header {
      width: 700px;
    }

    .el-input__inner {
      width: 280px;
      height: 28px;
      padding: 0px 8px;
    }

    .botTon {
      width: 98px;
      height: 40px;
      background: rgb(64, 158, 255);
      border: 0px solid white;
      border-radius: 4px;
      margin-left: 11px;
      outline: 0;
      color: white;
      cursor: pointer;
      margin-left: 64px;
    }

    /* 二维码 */
    .el-upload--picture-card {
      margin: 20px 64px;
    }
    .layui-form-radio {
    line-height: 28px;
    margin: 0px -17px 0 0;
    padding-right: 10px;
    cursor: pointer;
    font-size: 0;
  }
  .el-radio__inner{
    position: relative;
    left: 18px;
    top: 3px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader-icon{
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
  .el-upload img{
    width: 120px;
    height: 120px;
  }
  .otherInput_container{
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .otherInput_container span{
    height: 36px;
    line-height: 36px;
    border: 1px solid #e6e6e6;
    padding: 0 10px;
    background: #eee;
    color: #afafaf;
  }
  .otherInput_container span:first-child{
    border-right: none;
  }
  .otherInput_container span:last-child{
    border-left: none;
  }
  </style>
</head>
<body>
<form id="form1">
  <div id="app">
    <div style="padding: 36px 20px;" class="public-container">
      <div style="width: 68%;min-width: 634px" class="flex align-items-center">
        <div class="step-item" :class="{ active: currentStep > 0}">
          <span class="step-num">1</span>
          <span>活动基本信息</span>
        </div>
        <div class="flex-1 step-separator"></div>
        <div class="step-item" :class="{ active: currentStep > 1}">
          <span class="step-num">2</span>
          <span>设置欢迎语和海报</span>
        </div>
        <div class="flex-1 step-separator"></div>
        <div class="step-item" :class="{ active: currentStep > 2}">
          <span class="step-num">3</span>
          <span>设置推送消息</span>
        </div>
    {if !$qyFission->id}
        <div class="flex-1 step-separator"></div>
        <div class="step-item" :class="{ active: currentStep > 3}">
          <span class="step-num">4</span>
          <span>邀请客户参与</span>
        </div>
    {/if}
      </div>
    </div>
  
    <!-- step1 - 活动基本信息 -->
    <section v-show="currentStep === 1" class="public-container" style="padding: 20px;">
      <div class="layui-form create-form form-label-large">
        <div class="container-header">
          <p class=""><strong>基本信息</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span style="color: red;">*</span> 活动名称：</label>
          <div style="width: 464px;" class="layui-input-block">
            <input type="text" name="name" id="name" value="{$qyFission->name}" required  lay-verify="required" placeholder="活动名称仅内部可见" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span style="color: red;">*</span> 客服成员：</label>
          <div style="width: auto;" class="layui-input-inline">
            <button data-type="baseInfo1" id="addPeople" type="button" class="layui-btn layui-btn-primary">+ 添加成员</button>
          </div>
          <div class="layui-form-mid layui-word-aux">可添加多个企业成员分别进行裂变</div>
        </div>
    <input type="hidden" name="selectedUser" value="{implode(',',json_decode($qyFission->users,1))}" id="selectedUser"/>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="flex align-start flex-wrap-wrap" id="selectedUserCon">
      {loop json_decode($qyFission->users,1) as $userid}
        <div class="service-card">
        <i class="iconfont icon-person"></i>{$h->get_user_by_id($qyFission->wid,$userid)['name']}
        </div>
      {/loop}

          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">自动通过好友
            <i class="iconfont icon-hint tooltip" data-content="开启后，客户添加该企业微信时，无需好友验证，将会直接添加成功"></i>
          ：</label>
          <div class="layui-input-block">
            <input type="checkbox" {if $qyFission->skip_verify}checked{/if} name="skip_verify" lay-text="已开启|已关闭" lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">客户标签
            <i class="iconfont icon-hint tooltip" data-content="给通过本次活动添加的客户自动打标签"></i>
          ：</label>
          <div class="layui-input-block">
            <input type="checkbox" {if $qyFission->auto_label}checked{/if} name="auto_label" lay-text="已开启|已关闭" lay-skin="switch">
          </div>
        </div>
    <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div style="width: auto;" class="layui-input-inline">
            <button data-type="baseInfo1" id="addLable" type="button" class="layui-btn layui-btn-primary">+ 添加标签</button>
          </div>
        </div>
    <input type="hidden" name="seleckedLable" value="{implode(',',json_decode($qyFission->select_label,1))}" id="seleckedLable"/>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="flex align-start" id="selectedLableCon">
           {loop json_decode($qyFission->select_label,1) as $lable}
        <div class="service-card">
        {$h->get_et_tags($qyFission->wid)[$lable]}
        </div>
       {/loop}
          </div>
        </div>
 
        <div class="layui-form-item">
          <label class="layui-form-label"><span style="color: red;">*</span> 活动结束时间：</label>
          <div style="min-width: 0;width: 200px;" class="layui-input-block">
            <input type="text" name="end_time" {if $qyFission->end_time}value="{date('Y-m-d H:i:s',$qyFission->end_time)}"{/if} class="layui-input" id="endTime" placeholder="请选择结束时间">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">炮灰域名:</label>
          <div style="min-width: 0;width: 200px;" class="layui-input-block">
            <input type="text" name="paohui_link" id="paohui_link" value="{$qyFission->paohui_link}"  autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">库存不足提示：</label>
          <div style="min-width: 0;width: 464px;" class="layui-input-block">
            <input type="text" name="marked" id="marked" value="{$qyFission->marked}"  placeholder="请输入库存不足提示语" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">库存控制
            <i class="iconfont icon-hint tooltip" data-content="开启后如果在第一阶段是有库存的，就会判断库存的多少去阻止提交"></i>
          ：</label>
          <div class="layui-input-block"> 
            <input type="checkbox" {if $qyFission->marked_controls}checked{/if} name="marked_controls" lay-text="已开启|已关闭" lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <div class="otherInput_container">
              <span>当第一阶阶梯奖励库存为</span>
              <input style="width: 200px;" type="text" name="marked_control" id="marked_control" value="{$qyFission->marked_control}" autocomplete="off" class="layui-input">
              <span>时，自动暂停活动</span>
            </div>
            <!-- <input type="number" name="marked_control" id="marked_control" value="{$qyFission->marked_control}" required  lay-verify="required" placeholder="请输入库存不足提示语" autocomplete="off" class="layui-input">
           <span style="color: red;">时，自动暂停活动</span> -->
          </div>
        </div>
         <div class="layui-form-item">
          <label class="layui-form-label">活动暂停提示：</label>
          <div style="min-width: 0;width: 464px;" class="layui-input-block">
            <input type="text" name="markeds" id="markeds" value="{$qyFission->markeds}"  placeholder="请输入活动暂停提示" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="container-header">
          <p class=""><strong>任务设置</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">高级设置：</label>
          <div style="width: auto;" class="layui-input-inline">
            <input type="checkbox" name="new_friends" {if $qyFission->new_friends}checked{/if} lay-skin="switch">
          </div>
          <div class="layui-form-mid layui-word-aux">
            <span>新好友才能助力</span>
            <i class="iconfont icon-hint tooltip" data-content="开启后，若客户在活动前已添加过企业任意员工，该客户将不被计入助力次数"></i>
          </div>
        </div>
    <div style="margin-bottom: 0;" class="layui-form-item">
          <label class="layui-form-label">性别限制：</label>
          <div class="layui-input-block">
            不限<input type="radio" name="sex" {if $qyFission->sex==0}checked{/if}  value="0">
            男<input type="radio" name="sex" {if $qyFission->sex==1}checked{/if}  value="1">
            女<input type="radio" name="sex" {if $qyFission->sex==2}checked{/if} value="2">
          </div>
          <div class="layui-form-mid layui-word-aux">选中性别计入助力次数</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div style="width: auto;" class="layui-input-inline">
            <input  type="checkbox" name="del_friends" {if $qyFission->del_friends}checked{/if} lay-skin="switch">
          </div>
          <div class="layui-form-mid layui-word-aux">删除员工好友后助力失效</div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">是否开启区域限制
            <i class="iconfont icon-hint tooltip" data-content="开启后，非该地区禁止参加活动"></i>
        </label>
          <div class="layui-input-block">
            <input type="checkbox" {if $qyFission->isarea}checked{/if} name="isarea" lay-text="已开启|已关闭" lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item" style="margin-left: -20px;">
          <label class="layui-form-label">联动选择框</label>
          <div class="layui-input-inline">
            <select id="provinces" name="provinces" lay-filter="provinces" style="width:100px;">
              <option value="">请选择省</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select id="citys" name="citys" lay-filter="citys">
              <option value="">请选择市</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select id="countys" name="area" lay-filter="countys">
              <option value="">请选择区/县</option>
            </select>
          </div>
        </div>
  
        <div style="margin-top: 40px;" class="layui-form-item">
          <div class="layui-input-block">
            <button @click="nextStep" type="button" class="layui-btn layui-btn-normal">下一步</button>
          </div>
        </div>
      </div>
    </section>

    <!-- step2 - 欢迎语和海报 -->
    <section v-show="currentStep === 2" class="public-container">
      <div class="layui-form create-form poster-form">
        <div class="container-header">
          <p class=""><strong>裂变海报设置</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">裂变海报：</label>
          <div class="layui-input-block">
            <!--<input type="radio" name="poster_type" value="1" title="上传海报" checked>
            <input type="radio" name="poster_type" value="2 " title="个人名片">-->
            <!-- 海报编辑区 -->
            <div  class="flex poster-edit-container">
              <div class="poster-previewer" id="posterimgshow" style="background: url({$qyFission->poster_imgurl}) center center /cover;">
                <div id="headImg">
                  <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/image_proxy.png" alt="">
                </div>
                <div class="draggables" id="usefMove">
                  <span class="poster-nickname" ><font id="nicheng" size="{$poster_fontstyle->size}" color="{$poster_fontstyle->color}">用户昵称</font></span>
                </div>
                <!--<button type="button" data-target="posterimg" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                  <i class="layui-icon">&#xe654;</i>上传海报
                </button>-->
                <div class="poster-qrcode" id="draggable">
                  <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/ewm.png" alt="">
                </div>
              </div>
              <div class="flex-1 poster-edit-box">
                <p style="margin-bottom: 15px;"><strong>海报设置：</strong></p>
                <div style="margin-bottom: 10px;" class="flex">
                  <label style="width: auto;padding-left: 0;" class="layui-form-label">用户头像</label>
                  <input type="checkbox" {if $qyFission->poster_avatar}checked{/if} name="poster_avatar" lay-skin="switch">
                  <label class="layui-form-label">用户昵称</label>
                  <input type="checkbox" {if $qyFission->poster_nickname}checked{/if} name="poster_nickname" lay-skin="switch">
                </div>
                <!--<div class="flex align-items-center">
                  <label style="width: auto;padding-left: 0;" class="layui-form-label">昵称颜色</label>
                  <div id="nicknameColorPicker"></div>
                </div>-->
                <div class="flex">
                  <label style="width: auto;padding-left: 0;" class="layui-form-label">文字颜色</label>
                  <div>
                    <form class="layui-form" action="">
                      <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 120px;">
                          <input type="text" name="poster_fontstyle[color]" value="{$poster_fontstyle->color}" placeholder="请选择颜色" class="layui-input" id="test-form-input">
                        </div>
                        <div class="layui-inline" style="left: -11px;">
                          <div id="test-form"></div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="flex">
                  <label style="width: auto;padding-left: 0;" class="layui-form-label">文字大小</label>
                  <div>
                      <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 120px;">
                          <input type="text" id="size"name="poster_fontstyle[size]" value="{$poster_fontstyle->size}" placeholder="请输入..." class="layui-input" >
                        </div>
                        <div class="layui-inline" style="left: -11px;">
                          <div id="test-form"></div>
                        </div>
                      </div>
                  </div>
                </div>
                <div style="margin: 20px 0 10px;">
         <input type="hidden" name="poster_imgurl" value="{$qyFission->poster_imgurl}" id="posterimg" />
                  <button type="button" data-target="posterimg" class="layui-btn layui-btn-sm layui-btn-normal select_img">
                    <i class="layui-icon">&#xe654;</i>上传海报
                  </button>
                </div>
                <div class="poster-tips">
                  <p>裂变海报设计须知：</p>
                  <p>（1）尺寸：800px*1300px，分辨率78</p>
                  <p>（2）[用户头像] [用户昵称] [裂变带参二维码] 这三个元素需要空出</p>
                  <p>（3）裂变海报其他部分皆可自定义设计</p>
                  <p>（4）裂变海报大小不超过2M</p>
                </div>
              </div>
            </div>
            <input type="hidden" name="avtar_style[left]" value="{$avtar_style->left}" id="imgurl_left3"/>
          <input type="hidden" name="avtar_style[top]" value="{$avtar_style->top}" id="imgurl_top3"/>

      <input type="hidden" name="coordinate[imgurl_left]" value="{if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_left']}{else}162{/if}" id="imgurl_left"/>
      <input type="hidden" name="coordinate[imgurl_top]" value="{if $qyFission->poster_coordinate}{json_decode($qyFission->poster_coordinate,1)['imgurl_top']}{else}338{/if}" id="imgurl_top"/>
      <input type="hidden"  id="Aname" name="Aname">
      <input type="hidden" name="poster_fontstyle[left]" value="{$poster_fontstyle->left}" id="imgurl_left1"/>
      <input type="hidden" name="poster_fontstyle[top]"value="{$poster_fontstyle->top}" id="imgurl_top1"/>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">裂变海报：</label>
          <div style="float: left;margin: auto 10px auto 0;width: auto;min-width: 0;" class="layui-input-block">
            <input type="checkbox" {if $qyFission->forward_set}checked{/if} name="forward_set" lay-skin="switch">
          </div>
          <div class="layui-form-mid layui-word-aux">设置海报转发话术，开启后客户可直接复制文案分享</div>
        </div>
        <div class="layui-form-item layui-form-text">
          <div class="layui-input-block">
            <div class="poster-talk">
              <textarea name="forward_text" maxlength="200" placeholder="请输入海报转发话术" value="{$qyFission->forward_text}" class="layui-textarea">{$qyFission->forward_text}</textarea>
              <!--<p>6/200</p>-->
            </div>
          </div>
        </div>
   
        <div class="container-header">
          <p class=""><strong>欢迎语设置</strong></p>
          <hr>
        </div>
        <div style="-webkit-box-align: start;align-items: flex-start;" class="flex">
          <div class="flex-1">
            
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red;">*</span> 欢迎语：</label>
              <div class="layui-input-block rich-text-wrap">
                <div class="insert-btn">
                  <span id="insert" unselectable="on" onmousedown="return false">[插入活动链接]</span>
                  <span id="inserts" unselectable="on" onmousedown="return false">[插入客户昵称]</span>
                </div>
                <div contenteditable="true" id="edit_hy_text_content_div" name="edit_hy_text_content_div" class="layui-textarea">{if $qyFission->hy_text_content}{$qyFission->hy_text_content}{else}你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品<br><br>参与流程：<br>①将海报发给好友或朋友圈<br>②邀请x位好友扫码添加，即可成功获得奖品<br>③进入链接<font style="color: blue;">链接</font>点击查看进度，完成任务后即可领取奖励哦<br><br>快去分享您的专属海报吧<br>↓↓↓{/if}</div>
                <div class="rich-text-box">
                  <!-- <textarea  name="hy_text_content" id="edit_hy_text_content_textarea" class="layui-textarea" >
                  </textarea> -->
                  <input type="hidden" name="hy_text_content" id="edit_hy_text_content_textarea" />
                  <input type="hidden" name="invitation_text" id="edit_hy_text_content_textareas" />
                  <!--<p>171/4000</p>-->
                </div>
              </div>
            </div>
  
            <div style="margin-top: 40px;" class="layui-form-item">
              <div class="layui-input-block">
                <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
                <button @click="nextStep" type="button" class="layui-btn layui-btn-normal">下一步</button>
              </div>
            </div>
          </div>
  
          <div class="phone-previewer">
            <div class="phone-pre-content">
              <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
              <div class="phone-content">
                <p class="date">17:20</p>
                <div class="phone-msg-wrap">
                  <div class="phone-msg phone-msg-text">
                    <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                    <div>你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品
  
  参与流程：
  ①将海报发给好友或朋友圈
  ②邀请x位好友扫码添加，即可成功获得奖品
  ③进入链接点击查看进度，完成任务后即可领取奖励哦      

快去分享您的专属海报吧↓↓↓  
                    </div>
                  </div>
                  <div class="phone-msg phone-msg-news">
                    <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                    <div class="news">
                      <p class="title">点击这里，完成任务领取奖品吧👇</p>
                      <div>
                        <span class="desc">快来参加活动吧</span>
                        <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
      </div>
    </section>

    <!-- step3 - 设置推送 -->
    <section v-show="currentStep === 3" class="public-container">
      <div class="create-form layui-form" action="">
        <div class="container-header">
          <p class=""><strong>企微推送</strong></p>
          <hr>
        </div>
        <div class="flex">
          <div class="flex-1">
            <div class="layui-form-item">
              <label class="layui-form-label">给员工推送：</label>
              <div class="layui-input-block layui-input-block-float">
                <input {if $qyFission->push_staff}checked{/if} type="checkbox" name="push_staff" lay-skin="switch">
              </div>
              <div class="layui-form-mid layui-word-aux">开启后，若客户完成裂变任务，系统会给所属员工发送通知提醒</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">给客户推送：</label>
              <div class="layui-input-block layui-input-block-float">
                <input {if $qyFission->push_customer}checked{/if} type="checkbox" name="push_customer" lay-skin="switch">
              </div>
              <div class="layui-form-mid layui-word-aux">客户裂变成功后，给客户发送裂变成功的提醒通知</div>
            </div>
            <div class="layui-form-item">
              <div class="flex push-remind">
                <p>提示：</p>
                <div class="flex-1">
                  <p>1、本次推送将占用1次「企业群发」机会，每个客户每月只可收到4次企业群发</p>
                  <p>2、如完成任务的客户本月已收次4次群发消息本条邀请将不会成功发送</p>
                </div>
              </div>
            </div>   
            
  
            <div class="layui-form-item">
              <label class="layui-form-label">消息1：</label>
              <div class="layui-input-block rich-text-wrap">
                <div class="insert-btn">
                 <!-- <span>[插入客户昵称]</span>-->
                </div>
                <div class="rich-text-box">
                  <textarea name="push_text_content" class="layui-textarea">{$qyFission->push_text_content}</textarea>
                  <!--<p>171/4000</p>-->
                </div>
              </div>
            </div>
          </div>
          <div>
            <p style="width: 400px;margin: 41px 0 20px;text-align: center;font-size: 12px;line-height: 17px;color: rgba(0,0,0,.85);">
              <i style="font-size: 14px;color: #999;" class="layui-icon layui-icon-about"></i> 提示：需员工确认发送后客户才会收到以下推送消息
            </p>
            <div style="padding: 0 63px;" class="phone-previewer">
              <div class="phone-pre-content">
                <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
                <div class="phone-content">
                  <p class="date">17:20</p>
                  <div class="phone-msg-wrap">
                    <div class="phone-msg phone-msg-text">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <div>你好，</div>
                    </div>
                    <div class="phone-msg phone-msg-news">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <div class="news">
                        <p class="title">点击这里，完成任务领取奖品吧👇</p>
                        <div>
                          <span class="desc">快来参加活动吧</span>
                          <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                        </div>
                      </div>
                    </div>
                    <div class="phone-msg phone-msg-img">
                      <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                      <img class="image" src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/phone.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-top: 40px;" class="layui-form-item">
          <div class="layui-input-block">
            <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
            <button {if $qyFission->id} onclick="submitForm()" {else} @click="nextStep" {/if} type="button" class="layui-btn layui-btn-normal">下一步</button>
          </div>
        </div>
      </div>
    </section>

    <!-- step3 - 邀请客户参与 -->
    <section v-show="currentStep === 4" class="public-container">
      <div class="layui-form poster-form">
        <div class="container-header">
          <p class=""><strong>选择客户参与方式</strong></p>
          <hr>
        </div>
        <div class="layui-form-item">
          <div style="margin-left: 20px;" class="layui-input-block">
            <input type="radio" name="invitation_check" value="1" title="邀请参与客户" checked>
            <input type="radio" name="invitation_check" value="2" title="暂不邀请">
          </div>
        </div>
  
        <!-- 邀请参与客户 -->
        <section>
          <div style="margin-bottom: 5px;" class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span> 选择客户：</label>
            <div class="layui-input-block">
              <input type="radio" name="invitation_range" value="1" title="全部客户" checked>
              <input type="radio" name="invitation_range" value="2" title="筛选客户">
            </div>
          </div>
      <div class="layui-form-item">
          <label class="layui-form-label">筛选客户：</label>
          <div style="width: auto;" class="layui-input-inline">
            <button id="addEt" type="button" class="layui-btn layui-btn-primary">+ 选择客户</button>
          </div>
      </div>
      <input type="hidden" name="selected_et" value="" id="selectedEt"/>
          <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="flex align-start flex-wrap-wrap" id="selectedEtCon">
          </div>
        </div>
        </section>
  
        <div class="container-header">
          <p class=""><strong>邀请文案</strong></p>
          <hr>
        </div>
        <div style="-webkit-box-align: start;align-items: flex-start;" class="flex">
          <div class="flex-1">
            
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red;">*</span> 邀请文案：</label>
              <div class="layui-input-block rich-text-wrap">
                <div class="insert-btn">
                  <span id="insert_one" unselectable="on" onmousedown="return false">[插入活动链接]</span>
                </div>
                <div class="rich-text-box">
                    <div contenteditable="true" id="invitation_texts_one" class="layui-textarea">你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品 <br>参与流程：<br>①将海报发给好友或朋友圈<br>②邀请x位好友扫码添加，即可成功获得奖品<br>③进入<font style="color:blue;">链接</font>点击查看进度，完成任务后即可领取奖励哦    <br>  快去分享您的专属海报吧↓↓↓<br>
                </div>
                </div>
              </div>
            </div>
  
            <div style="margin-top: 40px;" class="layui-form-item">
              <div class="layui-input-block">
                <button @click="prevStep" type="button" class="layui-btn layui-btn-primary">上一步</button>
                <button onclick="submitForm()" type="button" class="layui-btn layui-btn-normal">下一步</button>
              </div>
            </div>
          </div>
  
          <div class="phone-previewer">
            <div class="phone-pre-content">
              <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
              <div class="phone-content">
                <p class="date">17:20</p>
                <div class="phone-msg-wrap">
                  <div class="phone-msg phone-msg-text">
                    <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                    <div>你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品
  
  参与流程：
  ①将海报发给好友或朋友圈
  ②邀请x位好友扫码添加，即可成功获得奖品
  ③进入<font style="color:blue;">链接</font>点击查看进度，完成任务后即可领取奖励哦      

快去分享您的专属海报吧↓↓↓
                    </div>
                  </div>
                  <div class="phone-msg phone-msg-news">
                    <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                    <div class="news">
                      <p class="title">点击这里，完成任务领取奖品吧👇</p>
                      <div>
                        <span class="desc">快来参加活动吧</span>
                        <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  </form> 
  

  <!-- 成员选择面板 -->
  <div style="display: none;padding: 20px;" id="serviceModel">
    <p style="font-size: 13px;margin-bottom: 20px">没有想要添加的成员？
      <span class="add-service-doc-btn" style="color: #1E9FFF;cursor: pointer;">添加成员教程</span>
    </p>
    <div class="flex justify-center">
      <div id="serviceTransfer" class="demo-transfer"></div>
    </div>
  </div>
  <!-- 新建标签组面板 -->
  <div style="display: none;padding: 20px;" id="newTagGroupModel">
    <form action="" class="layui-form form-label-large">
      <div class="layui-form-item">
        <label class="layui-form-label">标签组名称：</label>
        <div style="min-width: 0;" class="layui-input-block">
          <input type="text" name="tagGroupName" required  lay-verify="required" maxlength="15" placeholder="最多15个字" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">标签名称：</label>
        <div style="width: 50%;" class="layui-input-inline">
          <input type="text" name="tagName" required  lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div style="width: 50%;" class="layui-input-inline">
          <input type="text" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
        </div>
        <button style="border: 0;" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
          <i class="layui-icon layui-icon-delete"></i>
        </button>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-primary">
            <i class="layui-icon layui-icon-add-circle-fine"></i>&nbsp;添加标签
          </button>
        </div>
      </div>
    </form>
  </div>
  <template id="list">
    <div>
      <slot name="text"></slot>
    </div>
  </template>
  <script src="/fission/js/jquery.min.js"></script>
  <script src="/fission/js/layui.all.js"></script>
  <script src="/unpkg/unpkg.vue.js"></script>
  <script src="/fission/js/common.js"></script>
  <script src="/js/ajax.js"></script>
  <script src="/unpkg/lib-master/index.js"></script>
  <script type="text/javascript">
     function clearNoNum(obj) {
          obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
          obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
          obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
          if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
               obj.value = parseFloat(obj.value);
          }
     }
  </script>
  <script>
    // Vue控制示例
    var app = new Vue({
      el: '#app',
      data: {
      imgIndex: "0",
      currentStep: 1,
      autoFriend: true,
      posterAvatar: true,
      posterNickname: true,
      // 奖励类型
      radio: '1',
      editableTabsValue: '1',
      // 全部的数据
      editableTabs: [{
        title: '1阶段奖励',
        // 奖励类型和radio相同
        name: '1',
        id:'',
        // from里面的数据
        content: {
          radio: '1',
          // 兑换码
          formLabelAlign: {
            stage_describe: '',
            AlignName: '',
            region: '',
            type: '',
            datas:'{$html}',
            money:'',
            ids:'',
            numbers:'',
            nameA:''
          },
          lisa:'',
          // 自定义二维码 dialogImageUrl存放处
          dialogImageUrl: '', 
        }
      }],
      tabIndex: 1,
      options:{$dhuanma},
      dialogVisible: false,
      boxdata:{$jiduanym}
    },
    components: {
      "list": {
        template: "#list",
      }
    },
    computed:{

    },
      mounted() {
        init();
        layui.use(['form'], function(){
          layui.form.render();
        });
        // console.log(this.boxdata[0]);
        this.editableTabs[0].content.radio= this.boxdata[0]?this.boxdata[0].prize_type:'1';
        this.editableTabs[0].content.formLabelAlign.AlignName= this.boxdata[0]?this.boxdata[0].stage_name:'';
        this.editableTabs[0].content.formLabelAlign.region= this.boxdata[0]?this.boxdata[0].stage_num:'';
        this.editableTabs[0].content.formLabelAlign.stage_describe= this.boxdata[0]?this.boxdata[0].stage_describe:'';
        this.editableTabs[0].content.formLabelAlign.type= this.boxdata[0]?this.boxdata[0].s_num:'';
        this.editableTabs[0].content.formLabelAlign.money= this.boxdata[0]?this.boxdata[0].redbag:'';
        this.editableTabs[0].content.lisa= this.boxdata[0]?this.boxdata[0].hxusers:'';
        this.editableTabs[0].content.dialogImageUrl= this.boxdata[0]?this.boxdata[0].erwei_code:'';
        this.editableTabs[0].content.formLabelAlign.nameA= this.boxdata[0]?this.boxdata[0].form_url:'';
        this.editableTabs[0].content.formLabelAlign.ids= this.boxdata[0]?this.boxdata[0].id:'';
        this.editableTabs[0].id=this.boxdata[0]?this.boxdata[0].d_code_id:''
        this.boxdata.forEach((item, index) => {
          if(index != 0){
            console.log(item);
            this.addTab(index,item);
          }
        });
        this.editableTabs.forEach((tab, index) => {
               if(tab.content.radio == 4){
                    $("[class=dhj]").each(function(){
                         $(this).attr("style","display:block");  
                    });
               }else{
                    $("[class=dhj]").each(function(){
                         $(this).attr("style","display:none");  
                    });
               }
          })
      },
      updated:function() {
        // layui悄咪咪的用了Vue的模板引擎，需要重载 以解决radio、checkbox等失效
        layui.use(['form'], function(){
          layui.form.render();
        })
      },
      watch : {
         'editableTabsValue':function(val) { //监听切换状态-计划单
          this.editableTabs.forEach((tab, index) => {
               if(val == tab.name){
                    if(tab.content.radio == 4){
                         $("[class=dhj]").each(function(){
                              $(this).attr("style","display:block");  
                         });
                    }else{
                         $("[class=dhj]").each(function(){
                              $(this).attr("style","display:none");  
                         });
                    }
               } 
          })
          var datas = app._data.editableTabs[0].content.formLabelAlign.datas;
          if(datas){
               $("[name=selectedhxCon]").each(function(){
                    $(this).html(datas);  
               });
          }
         },
      },
      methods: {
        // changeE(){
        //   this.boxdata={$jiduanym}
        //   console.log(this.boxdata)
        // },
       //  上传图片
      handleAvatarSuccess(res, file) {
        this.editableTabs[this.imgIndex].content.dialogImageUrl =res.data.filePath;
      },
      isSendMessage(el,id){
               if(el.target.tagName === 'INPUT') return;
               if(id == 4){
                    $("[class=dhj]").each(function(){
                         $(this).attr("style","display:block");  
                    });
                    var datas = app._data.editableTabs[0].content.formLabelAlign.datas;
                    if(datas){
                         $("[name=selectedhxCon]").each(function(){
                              $(this).html(datas);  
                         });
                    }
               }else{
                     $("[class=dhj]").each(function(){
                         $(this).attr("style","display:none");  
                    });
               }
          },
        // 提交按钮
      submit() {
        var asdf =JSON.stringify(this.editableTabs);
        $('#Aname').val(asdf);
      },
      // 添加 Tab
      addTab(targetName,item) {
        let newTabName = ++this.tabIndex + '';

        this.editableTabs.push({
          title: this.editableTabs.length + 1 + '阶段奖励',
          name: newTabName,
          id: item ? item.d_code_id : '',
          content: {
            radio: item?item.prize_type:'1',
            // 表单
            formLabelAlign: {
              // name: '',
              AlignName: item?item.stage_name:'',
              region: item?item.stage_num:'',
              stage_describe: item?item.stage_describe:'',
              ids: item?item.id:'',
              type: item?item.s_num:'',
              money:item?item.redbag:'',
              nameA:item?item.form_url:''
            },
            lisa:item?item.hxusers:'',
            // 自定义二维码
            dialogImageUrl: item?item.erwei_code:'',
          }
        });
        this.editableTabsValue = newTabName;
      },
      // 删除 Tab
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        this.editableTabs.forEach((item, index) => {
          console.log(index + 1)
          item.title = (index + 1) + '阶段'
        });
        alert('注意：删除当前阶梯后，系统会删除当前阶梯的活动数据')
      },
      
      prevStep() {
          this.currentStep -= 1
        },
      nextStep() {
        if (this.currentStep >= 4) {      
          // alert(formData);
          return
        }else if(this.currentStep == 1){
        if(!$('#name').val()){
          tusi('请输入活动名称');
          return
        }
        if(!$('#selectedUser').val()){
          tusi('请选择客服');
          return
        }
        if(!$('#endTime').val()){
          tusi('请选择活动结束时间');
          return
        } 
        var dd =document.getElementById('selectedhx');
        if(dd){
          console.log(this.imgIndex)
          this.editableTabs[this.imgIndex].content.lisa=dd.value;
        }
        this.submit()
        }
          this.currentStep += 1
      }
      }
    })

  function submitForm(){
    hy_text_content = $("#edit_hy_text_content_div").html();
    hy_content = $("#invitation_texts_one").html();
    $("#edit_hy_text_content_textarea").val(hy_text_content);
    $("#edit_hy_text_content_textareas").val(hy_content);
    var formData = $('#form1').serialize(); 
    myAjaxPost(false, true, '', formData, function (resp) {
      if (resp.status == 'success') {
        tusi(resp.msg);
        setTimeout(function(){
          location.href = 'mission_list.html'; 
        },2000);
      }else{
        alert(resp.msg);
      }
    });
  }
  
    function init() {
      var $ = $ || layui.$;
      // 成员选择穿梭框
      layui.transfer.render({
        elem: '#serviceTransfer'
        ,title: ['全部成员', '已选成员']
        ,data: [
          { "value": "1", "title": "李白"}
          ,{ "value": "2", "title": "杜甫"}
          ,{ "value": "3", "title": "苏轼"}
          ,{ "value": "4", "title": "李清照"}
          ,{ "value": "5", "title": "鲁迅", "disabled": true}
          ,{ "value": "6", "title": "巴金"}
          ,{ "value": "7", "title": "冰心"}
          ,{ "value": "8", "title": "矛盾"}
          ,{ "value": "9", "title": "贤心"}
        ]
        ,showSearch: true
        ,onchange: function(obj, index){
          var arr = ['左边', '右边'];
          layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
        }
      })
      $(document).on('click', '.add-service', function() {
        var type = $(this).data('type');
        console.log(type);
        showServiceTransfer(type)
      })
      function showServiceTransfer(type) {
        // type 哪里触发的
        layer.open({
          type: 1
          ,title: '添加成员'
          ,closeBtn: true
          ,area: '688px'
          ,id: 'addService' //设定一个id，防止重复弹出
          ,content: layui.$('#serviceModel')
          ,btn: ['确定', '取消', '联系客服']
          ,yes: function(index, layero) {
            //按钮【按钮一】-确定 的回调
          }
          ,btn3: function(index, layero){
            // 按钮【按钮三】-联系客服 的回调
          }
        })
      }
      // 成员添加教程
      $(document).on('click', '.add-service-doc-btn', showAddDoc)
      function showAddDoc() {
        layer.open({
          type: 1
          ,title: '如何添加成员'
          ,closeBtn: true
          ,area: '688px'
          ,id: 'addServiceDoc' //设定一个id，防止重复弹出
          ,content: layui.$('#addServiceDocModel')
          ,btn: ['知道了']
          ,yes: function(index, layero) {
            layer.close(index)
          }
        })
      }

      // 新建标签组
      $(document).on('click', '.add-group', showNewTagGroup)
      function showNewTagGroup() {
        layer.open({
          type: 1
          ,title: '新建标签组'
          ,closeBtn: true
          ,area: '500px'
          ,id: 'newTagGroup' //设定一个id，防止重复弹出
          ,content: layui.$('#newTagGroupModel')
          ,btn: ['确定', '取消']
          ,yes: function(index, layero) {
            //按钮【按钮一】-确定 的回调
            layer.close(index)
          }
        })
      }

      // 活动结束时间
      layui.laydate.render({
        elem: '#endTime'
        ,type: 'datetime'
    ,min: 0
      });

      /**
       * STEP 2
       */

      layui.use('colorpicker', function() {
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
          elem: '#nicknameColorPicker',  //绑定元素
          color: '#000000',
          done: function(color) {
            console.log(color)
          }
        });
      });

      layui.use('upload', function() {
        var upload = layui.upload;
        // 海报背景图上传
        upload.render({
          elem: '.poster-upload-btn'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layer.msg('上传成功');
          }
        })
        // 企业logo上传
        upload.render({
          elem: '#idcardLogoUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#idcardLogoPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
        // 链接封面上传
        upload.render({
          elem: '#linkCoverUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layui.$('.poster-cover img').attr('src', res.files.file)
          }
        })
      })

      /**
       * STEP 3
       */
      layui.use('upload', function() {
        var upload = layui.upload;
        // 推送消息2-图片
        upload.render({
          elem: '#pushMsgImgUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#pushMsgImgPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
      })

      /**
       * STEP 4
       */
      layui.use('colorpicker', function() {
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
          elem: '#nicknameColorPicker',  //绑定元素
          color: '#000000',
          done: function(color) {
            console.log(color)
          }
        });
      });

      layui.use('upload', function() {
        var upload = layui.upload;
        // 企业logo上传
        upload.render({
          elem: '#idcardLogoUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            // layer.msg('上传成功');
            layui.$('#idcardLogoPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
          }
        })
        // 链接封面上传
        upload.render({
          elem: '#linkCoverUpload'
          ,url: 'https://httpbin.org/post' //改成您自己的上传接口
          ,done: function(res){
            layui.$('.poster-cover img').attr('src', res.files.file)
          }
        })
      })

      layui.use('laydate', function(){
        var laydate = layui.laydate;

        // 邀请日期范围
        laydate.render({
          elem: '#invitationDateRange'
          ,range: true
        });
      })

    }
    
  </script>

  <script>
     $('#addPeople').on('click',function(){
         if("{$id}"){
               layer.open({
                    type: 2,
                    title: '请选择使用人员',
                    shadeClose: true,
                    shade: 0.2,
                    area: ['700px', '530px'],
                    content: 'select_user-1.html?id={$id}'
               }); 
          }else{
               layer.open({
                    type: 2,
                    title: '请选择使用人员',
                    shadeClose: true,
                    shade: 0.2,
                    area: ['700px', '530px'],
                    content: 'select_user-1.html'
               }); 
          }
     }) 
  
     function ButLISE(){
          layer.open({
               type: 2,
               title: '请选择使用人员',
               shadeClose: true,
               shade: 0.2,
               area: ['700px', '530px'],
               content: 'select_user-3.html',
               end:function () {
                    var selectedhtml = $("#selectedhtml").val();
                    var selectedhx = $("#selectedhx").val();
                    app._data.editableTabs[0].content.formLabelAlign.numbers = selectedhx;
                    app._data.editableTabs[0].content.formLabelAlign.datas = selectedhtml;
                    if(selectedhtml){
                         $("[name=selectedhxCon]").each(function(){
                              $(this).html(selectedhtml);  
                         });  
                    }
                   
               }
          });
     }
  $('#addLable').on('click',function(){
    layer.open({
    type: 2,
    title: '请选择标签',
    shadeClose: true,
    shade: 0.2,
    area: ['700px', '530px'],
    content: 'select_tag.html'
    }); 
  })
  $('#addEt').on('click',function(){
    layer.open({
    type: 2,
    title: '请选择客户',
    shadeClose: true,
    shade: 0.2,
    area: ['700px', '600px'],
    content: 'select_et.html'
    }); 
  })
  function select_custom(){
    layer.open({
      type: 2,
      title: '请选择员工',
      shadeClose: true,
      shade: 0.2,
      area: ['700px', '530px'],
      content: 'select_user-2.html'
    });
  }
  function checkNum(a){
    var val = a.value;
    if (val=='') { 
　　　　　　a.value = 100;
　　　　}else if(!(/(^[1-9]\d*$)/.test(val))){
      a.value = 100;
    }else if(val > 100){
      a.value = 100;
    }
  }
  $('.select_img').on('click',function  () {
    var targetId=this.getAttribute('data-target');
    layer.open({
    title:'图片库',
    type: 2,
    area: ['700px', '450px'],
    fixed: false, //不固定
    maxmin: false,
    content: '/imgLib/lib.html?type=vshop_img&target='+targetId
    });
  })

  window.uploadImgCallback=function (tgt,url) {
    console.log('选择图片结果',tgt,url);
    if(tgt=='posterimg'){
    var inputEle=$('#posterimg');
    var prevEle=$('#posterimgshow');
    inputEle.val(url);
    prevEle.css('background',"url("+url+")center center /cover");
    //prevEle.show();
    }else if(tgt=='link_pic'){
    var inputEle=$('#link_pic');
    var prevEle=$('#pic_link_pic');
    inputEle.val(url);
    prevEle.attr('src',url);
    //prevEle.show();
    }else if(tgt=='push_image'){
    var inputEle=$('#push_image');
    var prevEle=$('#pic_push_image');
    inputEle.val(url);
    prevEle.attr('src',url);
    prevEle.show();
    }else if(tgt=='invitationLinkPic'){
    var inputEle=$('#invitationLinkPic');
    var prevEle=$('#pic_invitationLinkPic');
    inputEle.val(url);
    prevEle.attr('src',url);
    //prevEle.show();
    }else if(tgt=='lj_qrcode'){
    var inputEle=$('#lj_qrcode');
    var prevEle=$('#pic_lj_qrcode');
    inputEle.val(url);
    prevEle.attr('src',url);
    prevEle.show();
    }
  };

  </script>

  <!-- 拖拽 -->
  <script>
    $('#size').change(function () {
      // alert($('#size').val());
      $('#nicheng').attr('size',$('#size').val());
        
      });

      //获取需要拖拽的元素
      var divs = document.querySelector('#draggable');
      var user = document.querySelector('#usefMove');
      var headImg = document.querySelector('#headImg');
      headImg.onmousedown = function(evy){

          //event的兼容性
          var evy = evy||event;

          //获取鼠标按下的坐标
          var xy1 = evy.clientX;
          var yy1 = evy.clientY;

          //获取元素的left，top值
          var ly = headImg.offsetLeft;
          var ty = headImg.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(evy){

              //event的兼容性
              var evy = evy||event;

              //获取鼠标移动时的坐标
              var xy2 = evy.clientX;
              var yy2 = evy.clientY;

              //计算出鼠标的移动距离
              var xy = xy2-xy1;
              var yy = yy2-yy1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lty = yy+ty;
              var lsy = xy+ly;
              if(lty>=373){
                lty = 373
              }
              if(lty<=0){
                lty = 0
              }
              if(lsy<=0){
                lsy = 0
              }
              if(lsy>=200){
                lsy = 200
              }
              //更改元素的left，top值
              headImg.style.top = lty+'px';
              headImg.style.left = lsy+'px';
        $('#imgurl_left3').val(lsy);
        $('#imgurl_top3').val(lty);
          }

          //清除
          document.onmouseup = function(evy){

              document.onmousemove = null;

          }

      }

      user.onmousedown = function(evh){

          //event的兼容性
          var evh = evh||event;

          //获取鼠标按下的坐标
          var xh1 = evh.clientX;
          var yh1 = evh.clientY;

          //获取元素的left，top值
          var lh = user.offsetLeft;
          var th = user.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(evh){

              //event的兼容性
              var evh = evh||event;

              //获取鼠标移动时的坐标
              var xh2 = evh.clientX;
              var yh2 = evh.clientY;

              //计算出鼠标的移动距离
              var xh = xh2-xh1;
              var yh = yh2-yh1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lth = yh+th;
              var lsh = xh+lh;
              if(lth>=379){
                lth = 379
              }
              if(lth<=0){
                lth = 0
              }
              if(lsh<=0){
                lsh = 0
              }
              if(lsh>=168){
                lsh = 168
              }
              //更改元素的left，top值
              user.style.top = lth+'px';
              user.style.left = lsh+'px';
        $('#imgurl_left1').val(lsh);
        $('#imgurl_top1').val(lth);
          }

          //清除
          document.onmouseup = function(evh){

              document.onmousemove = null;

          }

      }



      //元素的鼠标落下事件
      divs.onmousedown = function(ev){

          //event的兼容性
          var ev = ev||event;

          //获取鼠标按下的坐标
          var x1 = ev.clientX;
          var y1 = ev.clientY;

          //获取元素的left，top值
          var l = divs.offsetLeft;
          var t = divs.offsetTop;

          //给可视区域添加鼠标的移动事件
          document.onmousemove = function(ev){

              //event的兼容性
              var ev = ev||event;

              //获取鼠标移动时的坐标
              var x2 = ev.clientX;
              var y2 = ev.clientY;

              //计算出鼠标的移动距离
              var x = x2-x1;
              var y = y2-y1;

              //移动的数值与元素的left，top相加，得出元素的移动的距离
              var lt = y+t;
              var ls = x+l;
              if(lt>=338){
                lt = 338
              }
              if(lt<=0){
                lt = 0
              }
              if(ls<=0){
                ls = 0
              }
              if(ls>=162){
                ls = 162
              }
              //更改元素的left，top值
              divs.style.top = lt+'px';
              divs.style.left = ls+'px';
        $('#imgurl_left').val(ls);
        $('#imgurl_top').val(lt);
          }

          //清除
          document.onmouseup = function(ev){

              document.onmousemove = null;

          }

      }

  </script>

  <script>
  layui.use('colorpicker', function(){
    var $ = layui.$
    ,colorpicker = layui.colorpicker;
    
    //表单赋值
    colorpicker.render({
      elem: '#test-form'
      ,color: '#1c97f5'
      ,done: function(color){
        $('#test-form-input').val(color);
        $('#nicheng').attr('color',color);
        
      }
    });

  });
  layui.use('upload', function(){
              var upload = layui.upload;
               
              //执行实例
              var uploadInst = upload.render({
               accept: 'file'
              ,field: 'file'
                ,elem: '#test1' //绑定元素
                ,url: 'upload_file.html' //上传接口
                ,done: function(res){
                  //上传完毕回调
                layer.msg(res.msg);
                if(res.status == 'success'){
                  $('#file_path').val(res.data.filePath);
                    $('#file_name').val(res.data.fileName);
                    $('#file_name_show').html(res.data.fileName);
                }
                }
                ,error: function(){
                  //请求异常回调
                }
              });
            });
  </script>
  
  <script>
    //引入jquery
    layui.use(['layer', 'jquery', 'form'], function () {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;
        
    $(function () {
      // alert("11111");
        //页面初始，加载所有的省份  
        $.ajax({
            type: "get",
            url: "get_area-1.html",
            data: { "type": 1 },
            dataType: "json",
            success: function (data) {
              // console.log(data);
                //遍历json数据，组装下拉选框添加到html中
                $("#provinces").html("<option value=''>请选择省</option>");
                // console.log($("#provinces").html());
                $.each(data, function (i, item) {
                  
                  if("{$qyFission->province}" == item.adcode ){
                    $("#provinces").append("<option selected value='" + item.adcode + "'>" + item.name + "</option>");
                  }else{
                    $("#provinces").append("<option value='" + item.adcode + "'>" + item.name + "</option>");
                  }
                    
                });
                layui.form.render();
            }
        });
      
        $.ajax({
                type: "get",
                url: "get_area-2.html",
                data: { "pnum": "{$qyFission->province}", "type": 2 },
                dataType: "json",
                success: function (data) {
                    //遍历json数据，组装下拉选框添加到html中
                    $("#citys").html("<option value=''>请选择市</option>");
                    $.each(data, function (i, item) {
                      if("{$qyFission->city}" == item.adcode ){
                    
                    $("#citys").append("<option selected value='" + item.adcode + "'>" + item.name + "</option>");
                  }else{
                    $("#citys").append("<option value='" + item.adcode + "'>" + item.name + "</option>");
                  }
                    
                       
                    });
                    layui.form.render('select');
                }
            });
            $.ajax({
                type: "get",
                url: "get_area-3.html",
                data: { "cnum": "{$qyFission->city}", "type": 3 },
                dataType: "json",
                success: function (data) {
                    //遍历json数据，组装下拉选框添加到html中
                    $("#countys").html("<option value=''>请选择区</option>");
                    $.each(data, function (i, item) {
                      if("{$qyFission->area}" == item.adcode ){
                        $("#countys").append("<option selected value='" + item.adcode + "'>" + item.name + "</option>");
                  }else{
                    $("#countys").append("<option value='" + item.adcode + "'>" + item.name + "</option>");
                  }
                      
                    });
                    layui.form.render();
                }
            });
      });
    
      // 发放优惠券
      form.on('switch(pb_coupon)', function(data){
          if(data.elem.checked == true){
            $(".pb_coupon").show();
          }else{
            $(".pb_coupon").hide();
          }
          form.render();
      });

      // 设置等级
      form.on('switch(pb_setlevel)', function(data){
          if(data.elem.checked == true){
            $(".pb_setlevel").show();
          }else{
            $(".pb_setlevel").hide();
          }
          form.render();
      });
    //监听省select框
    form.on('select(provinces)', function(datas){

            $.ajax({
                type: "get",
                url: "get_area-2.html",
                data: { "pnum": datas.value, "type": 2 },
                dataType: "json",
                success: function (data) {
                    //遍历json数据，组装下拉选框添加到html中
                    $("#citys").html("<option value=''>请选择市</option>");
                    $.each(data, function (i, item) {
                 
                    $("#citys").append("<option value='" + item.adcode + "'>" + item.name + "</option>");
                    
                       
                    });
                    layui.form.render('select');
                }
            });
        });

        //监听市select框 
        form.on('select(citys)', function(datas){
         
            $.ajax({
                type: "get",
                url: "get_area-3.html",
                data: { "cnum": datas.value, "type": 3 },
                dataType: "json",
                success: function (data) {
                    //遍历json数据，组装下拉选框添加到html中
                    $("#countys").html("<option value=''>请选择区</option>");
                    $.each(data, function (i, item) {
                   
                    $("#countys").append("<option value='" + item.adcode + "'>" + item.name + "</option>");
                  
                      
                    });
                    layui.form.render();
                }
            });
        });  
   
        })
        
</script>
<script type="text/javascript">
        // 在光标位置插入html代码，如果dom没有获取到焦点则追加到最后
        window.onload= function(){
            function insertAtCursor(jsDom, html) {
            if (jsDom != document.activeElement) { // 如果dom没有获取到焦点，追加
                jsDom.innerHTML = jsDom.innerHTML + html;
                return;
            }
            var sel, range;
            if (window.getSelection) {
                // IE9 或 非IE浏览器
                debugger
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(),
                        node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if (document.selection && document.selection.type != "Control") {
                // IE < 9
                document.selection.createRange().pasteHTML(html);
            }
        }
 
        //  点击插入
        document.getElementById('insert').onclick = function() {
            var html = '<font style="color: blue;">链接</font>';
            insertAtCursor(document.getElementById('edit_hy_text_content_div'), html);
        };
       document.getElementById('inserts').onclick = function() {
            var html = '<font style="color: green;">用户昵称</font>';
            insertAtCursor(document.getElementById('edit_hy_text_content_div'), html);
        };
        //  点击插入
        document.getElementById('insert_one').onclick = function() {
            var html = '<font style="color: blue;">链接</font>';
            insertAtCursor(document.getElementById('invitation_texts_one'), html);
        };
    }
 
    </script>
</body>
</html>